<template>
  <div class="p-[5px]">
    <div class="flex">
      <device-monitor-detail :key="1" equipCode="Modbus-01" class="flex-1" />
      <device-monitor-detail :key="2" equipCode="Modbus-02" class="flex-1" />
    </div>
  </div>
</template>

<!-- 手动挂载左侧菜单高亮 -->
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  // 页面进入路由处理
  beforeRouteEnter(to, from, next) {
    // to.meta.defaultActive = "/iot/deviceMonitor";
    next();
  },
  // 页面离开路由处理（暂不开发）
  // beforeRouteLeave(to, from, next) {
  //   console.log("from", to);
  //   useTagsViewStore()
  //     .delView(from)
  //     .then((res: any) => {
  //       next();
  //     });
  // },
});
</script>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import deviceMonitorDetail from "../deviceMonitorDetail/index.vue";
const route = useRoute();

defineOptions({
  name: "IOTDEVICEMONITORDETAILS",
  inheritAttrs: false,
});

// 当前页面被激活时触发
onActivated(async () => {
  window.scrollTo(0, 0);
});

onMounted(() => {
  // 获取设备及采集详情
  if (route.query.equipCodes) {
    // 获取链接上的equipCodes，进行循环处理，待开发
    // console.log("route.query.equipCodes", route.query.equipCodes);
  } else {
    ElMessage.error("设备编号不能为空");
  }
});

onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
:deep(.page_contain) {
  margin: 0px;
  padding: 0px !important;
  // border-right: 1px dashed #000;
  &:nth-child(even) {
    border-right: none;
  }
  .page_header {
    display: none;
  }
  .page_content {
    .page_content_row {
      background: #fff;
      // border: 1px solid rgba(3, 8, 72, 0.4);
      box-shadow: 1px 0px 5px 0 rgba(92, 123, 217, 0.3);
      border-radius: 4px;
      margin: 5px;
      .produceCard {
        height: calc(100vh - 125px);
        padding: 0px !important;
        margin: 0 !important;

        .el-collapse-item__header {
          height: 30px !important;
          margin-top: 10px;
        }
        .produce-c-title {
          margin: 15px 0 6px 16px !important;
        }
        .detail_line {
          padding-left: 12px;
          .detail {
            line-height: 24px;
          }
        }
        .el-checkbox {
          height: 24px !important;
        }
        .collect_info {
          width: 100% !important;
        }
        .device_tag_div {
          margin: 3px 5px;
          .statistic__head {
            margin-top: 10px !important;
            margin-bottom: 0px !important;
          }
        }
        .line_chart_div {
          .echarts {
            height: 250px;
          }
        }
      }
      .produceCard_left {
        border-right: 1px solid #eee;
        // display: none;
      }
    }
  }
}
</style>
